
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
  <div id="div1">
    <div :style='{fontSize: fontSize + "px"}'>{{msg}}</div>
    <menu-item :parr='parr' @tobig='handle' ></menu-item>     <!--父组件通过@tobig='handle'监听子组件发出的tobig事件，
                                                              并在该事件发生时调用handle方法。这显示了父组件如何响应子组件的行为。-->

    <!--<menu-item :parr='parr' @tobig='handle'></menu-item>
      这一行代码表示了menu-item组件的使用。这个标签就像HTML中的其他元素一样被嵌入到父组件的模板中。
        所以这个就是子组件
      -->
  </div>
  
  <script type="text/javascript">
    /*
      子组件向父组件传值
      需求：通过子组件来操作父组件，在子组件中调用handle方法。
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
          <button @click='$emit("tobig")' >按钮-> 扩大字体</button>   <!--通过事件（如tobig）与父组件进行通信。-->
    <!--  emit是Vue.js框架中的一个方法，用于子组件向父组件触发自定义事件。当一个子组件需要与父组件通信或在某个事件发生时通知父组件时，
        它可以使用emit方法来触发一个自定义事件。父组件可以通过监听这个事件来获取信息或执行相应的操作。-->
        </div>
      `
    });

    const vm = new Vue({
      el: '#div1',
      data: {
        msg: '父组件中内容',
        parr: ['aa','bb','cc'],
        fontSize: 20
      },
      methods: {
        handle: function(){
          // 修改fontSize的值
          this.fontSize += 15;
        }
      }
    });
  </script>
</body>
</html>
